<template>
  <a-collapse-panel name="ElementServiceTaskLike">
    <template #header>
      <collapse-title title="类型">
        <lucide-icon name="PlayCircle" />
      </collapse-title>
    </template>
    <div>
      <edit-item label="类型">
        <a-select style="width: 100%" v-model="form.type">
          <a-select-option v-for="{ label, value } in options" :value="value" :key="value">
            {{ label }}
          </a-select-option>
        </a-select>
      </edit-item>
      <edit-item label="JAVA类" v-if="form.type === 'class'">
        <a-input v-model="form.class" @change="(e) => handleAttrs(e, 'class')" />
      </edit-item>
      <edit-item label="表达式" v-if="form.type === 'expression'">
        <a-input v-model="form.expression" @change="handleExpression" />
      </edit-item>
      <edit-item label="结果变量" v-if="form.type === 'expression'">
        <a-input v-model="form.resultVariable" @change="handleExpression" />
      </edit-item>
      <edit-item label="代理表达式" v-if="form.type === 'delegateExpression'">
        <a-input
          v-model="form.delegateExpression"
          @change="(e) => handleAttrs(e, 'delegateExpression')"
        />
      </edit-item>
      <edit-item label="主题" v-if="form.type === 'external'">
        <a-input v-model="form.topic" @change="(e) => handleAttrs(e, 'topic')" />
      </edit-item>
      <edit-item label="连接器ID" v-if="form.type === 'connector'">
        <a-input v-model="form.connectorId" @change="handleConnector" />
      </edit-item>
    </div>
  </a-collapse-panel>
</template>

<script>
import {
  getFormValue,
  updateAttrs,
  updateConnector
} from "@/bo-utils/serviceTaskLikeUtil";
import EventEmitter from '@/utils/EventEmitter'
import EditItem from '@/components/common/EditItem.vue'
import { mapState } from 'pinia'
import modelerStore from '@/store/modeler'
export default {
  name: "ElementServiceTaskLike",
  components: { EditItem },
  title: "实现方式",
  icon: "user",
  data() {
    return {
      form: {
        class: "",
        expression: "",
        resultVariable: "",
        delegateExpression: "",
        external: "",
        connectorId: "",
        type: ""
      },
      options: [
        { label: "无", value: "" },
        { label: "JAVA类", value: "class" },
        { label: "表达式", value: "expression" },
        { label: "代理表达式", value: "delegateExpression" },
        { label: "外部", value: "external" },
        { label: "连接器", value: "connector" }
      ]
    };
  },
  mounted() {
    this.getFormValue();
    EventEmitter.on("element-update", this.getFormValue);
  },
  computed: {
    ...mapState(modelerStore, ['getActive', 'getActiveId', 'getModeling', 'getModdle'])
  },
  methods: {
    getFormValue() {
      this.form = getFormValue(this.getActive);
    },
    handleAttrs(e, key) {
      const value = e.target.value;
      updateAttrs(this.getActive, {
        [key]: value
      });
    },
    handleExpression() {
      updateAttrs(this.getActive, {
        expression: this.form.expression,
        resultVariable: this.form.resultVariable
      });
    },
    handleConnector(e) {
      const value = e.target.value;
      updateConnector(this.getActive, value);
    }
  }
};
</script>
